﻿@model HS.Domain.EF.SolicitudServicio

@using HS.Domain.EF;
@using Newtonsoft.Json;
@{
    Layout = null;
}

<div id="SolicitudServicio" class="row">
    <div class="col-sm-12">
        <ol class="breadcrumb">
            <li><a href="index-2.html#">Servicios</a></li>
            <li><a href="index-2.html#">Registrar Servicio</a></li>
            <li class="active">Crear</li>
        </ol>

        <div class="box">
            <div class="box-header">
                <h2>Registrar Servicio</h2>
            </div>

            <div class="toolbar">
                <a id="btn_BuscarCliente" role="button" class="btn btn-sm btn-primary"><i class="icon-search"></i>&nbsp;Buscar Cliente</a>
                <a id="btn_GuardarRegistro" role="button" class="btn btn-sm btn-primary"><i class="icon-save"></i>&nbsp;Guardar Registro</a>
                <a id="btn_CancelarRegistro" role="button" class="btn btn-sm btn-default"><i class="icon-remove"></i>&nbsp;Cancelar</a>
            </div>

            <div class="box-content">
                <div class="row col-sm-12 no-margin well">
                    <div class="col-sm-12">
                        <div class="col-sm-9 no-padding-left">
                            <h2>Cliente</h2>
                            <hr>
                        </div>
                        <div class="col-sm-3 no-padding-right">
                            <label>Código de Registro</label>
                            <div class="controls">
                                <input id="txt_CodigoRegistro" class="form-control focused" type="text" disabled="" data-bind="">
                            </div>
                        </div>

                        <div class="col-sm-12 no-margin no-padding">
                            <div class="col-sm-2 no-padding">
                                <label>Código</label>
                                <div class="controls">
                                    <input id="txt_CodigoCliente" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-5 no-padding-right">
                                <label>Apellido Paterno</label>
                                <div class="controls">
                                    <input id="txt_ApePaternoCliente" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-5 no-padding-right">
                                <label>Apellido Materno</label>
                                <div class="controls">
                                    <input id="txt_ApeMaternoCliente" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 no-margin no-padding">
                            <div class="col-sm-6 no-padding">
                                <label>Nombres</label>
                                <div class="controls">
                                    <input id="txt_NombresCliente" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-3 no-padding-right">
                                <label>Tipo Documento</label>
                                <div class="controls">
                                    <input id="ddl_TipoDocCliente" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                        data-bind="source: tipoDocumentoDS" data-value-field="Value" data-text-field="Text" style="width: 100%" />
                                </div>
                            </div>

                            <div class="col-sm-3 no-padding-right">
                                <label>Número de Documento</label>
                                <div class="controls">
                                    <input id="txt_NumDocCliente" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 no-margin no-padding">
                            <div class="col-sm-12 no-margin no-padding">
                                <div class="col-sm-4 no-padding">
                                    <label>Dirección</label>
                                    <div class="controls">
                                        <input id="txt_DireccionCliente" class="form-control focused" type="text" data-bind="">
                                    </div>
                                </div>

                                <div class="col-sm-2 no-padding-right">
                                    <label>Urbanización</label>
                                    <div class="controls">
                                        <input id="txt_UrbanizacionCliente" class="form-control focused" type="text" data-bind="">
                                    </div>
                                </div>

                                <div class="col-sm-2 no-padding-right">
                                    <label>Distrito</label>
                                    <div class="controls">
                                        <input id="ddl_DistritoCliente" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                            data-bind="source: distritosDS" data-value-field="Value" data-text-field="Text" style="width: 100%" />
                                    </div>
                                </div>
                                <div class="col-sm-2 no-padding-right">
                                    <label>Provincia</label>
                                    <div class="controls">
                                        <input id="ddl_ProvinciaCliente" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                            data-bind="source: provinciasDS" data-value-field="Value" data-text-field="Text" style="width: 100%" />
                                    </div>
                                </div>
                                <div class="col-sm-2 no-padding-right">
                                    <label>Departamento</label>
                                    <div class="controls">
                                        <input id="ddl_DepartamentoCliente" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                            data-bind="source: departamentosDS" data-value-field="Value" data-text-field="Text" style="width: 100%" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 no-margin no-padding">
                            <div class="col-sm-12 no-margin no-padding">
                                <div class="col-sm-2 no-padding">
                                    <label>Télefono Fijo</label>
                                    <div class="controls">
                                        <input id="txt_TelFijoCliente" class="form-control focused" type="text" data-bind="">
                                    </div>
                                </div>

                                <div class="col-sm-2 no-padding-right">
                                    <label>Télefono Celular</label>
                                    <div class="controls">
                                        <input id="txt_TelCelularCliente" class="form-control focused" type="text" data-bind="">
                                    </div>
                                </div>

                                <div class="col-sm-4 no-padding-right">
                                    <label>Correo electrónico</label>
                                    <div class="controls">
                                        <input id="txt_CorreoCliente" class="form-control focused" type="text" data-bind="">
                                    </div>
                                </div>
                                <div class="col-sm-2 no-padding-right">
                                    <div class="space-12"></div>
                                    <a href="#">Servicios Requeridos</a>
                                </div>
                                <div class="col-sm-2 no-padding-right">
                                    <div class="space-12"></div>
                                    <a href="#">Servicios Ejecutados</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row col-sm-12 no-margin well">
                    <div class="col-sm-12">
                        <div class="row col-sm-12 no-margin no-padding">
                            <h2>Detalle del Servicio</h2>
                            <hr>
                        </div>
                        @*<div class="col-sm-12 no-padding">
                            <a id="btn_BuscarServicio" role="button" class="btn btn-sm btn-primary"><i class="icon-search"></i>&nbsp;Buscar Servicio</a>
                        </div>*@

                        <div class="row col-sm-12 no-margin no-padding">
                            <div class="col-sm-2 no-padding">
                                <label>Código</label>
                                <div class="controls">
                                    <input id="txt_CodigoServicio" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-5 no-padding-right">
                                <label>Tipo de servicio</label>
                                <div class="controls">
                                    <input id="ddl_Servicios" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                        data-bind="source: serviciosDS" data-value-field="IdServicio" data-text-field="Nombre" style="width: 100%" />
                                </div>
                            </div>

                            <div class="col-sm-5 no-padding-right">
                                <label>Subtipo del servicio</label>
                                <div class="controls">
                                    <input id="ddl_Subtipos" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                                        data-bind="source: subtiposDS" data-value-field="IdSupTipo" data-text-field="Nombre" style="width: 100%" />
                                </div>
                            </div>
                        </div>

                        <div class="row col-sm-12 no-margin no-padding">
                            <div class="col-sm-12 no-padding">
                                <label>Detalle del servicio</label>
                                <div class="controls">
                                    <textarea id="txt_DetalleServicio" rows="4" placeholder="Ingrese descripción…" data-bind="" style="width: 100%; overflow: hidden; word-wrap: break-word; resize: vertical; height: 57px;"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row col-sm-12 no-margin no-padding">
                            <div class="row col-sm-12 no-margin no-padding">
                                <div class="col-sm-5 no-padding">
                                    <label>Dirección alternativa</label>
                                    <div class="controls">
                                        <input id="txt_DireccionAlternativaCliente" class="form-control focused" type="text" data-bind="">
                                    </div>
                                </div>

                                <div class="col-sm-4 no-padding-right">
                                    <label>Fecha visita</label>
                                    <div class="controls">
                                        <input id="ddl_FechaVisita" data-role="datepicker" />
                                    </div>
                                </div>

                                <div class="col-sm-3 no-padding-right">
                                    <div class="col-sm-12 no-padding">
                                        <label>Hora visita</label>
                                    </div>
                                    <div class="input-group col-sm-12 no-padding bootstrap-timepicker">
                                        <span class="input-group-addon"><i class="icon-time"></i></span>
                                        <input type="text" id="dtm_HoraVisita" class="form-control timepicker" value="11:30 PM">
                                    </div>
                                </div>
                            </div>

                            <div class="row col-sm-12">
                                <label class="checkbox inline">
                                    <input type="checkbox" value="option1" id="chk_VisitaDomicilio">
                                    Visita a domicilio
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row col-sm-12 no-margin well">
                    <div class="col-sm-12">
                        <div class="row col-sm-12 no-margin no-padding">
                            <h2>Detalle del Técnico</h2>
                            <hr>
                        </div>
                        <div class="col-sm-12 no-padding">
                            <a id="btn_BuscarTecnico" role="button" class="btn btn-sm btn-primary"><i class="icon-search"></i>&nbsp;Buscar Técnico</a>
                        </div>


                        <div class="row col-sm-12 no-margin no-padding">
                            <div class="col-sm-2 no-padding">
                                <label>Código</label>
                                <div class="controls">
                                    <input id="txt_CodigoTecnico" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-5 no-padding-right">
                                <label>Nombres y apellidos</label>
                                <div class="controls">
                                    <input id="txt_NombreTecnico" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>
                        </div>

                        <div class="row col-sm-12 no-margin no-padding">
                            <label>Lista de servicios requeridos</label>

                            <div class="space-4"></div>

                            <div class="col-sm-12 no-padding">
                                <div id="grd_BeneficiosList" data-role="grid" style="width: auto" data-bind="source: beneficiosDS"
                                    data-column="true" data-navigatable="true" data-selectable="row" data-sortable="true"
                                    data-columns='[        
                                        { "field": "Id",        "title": "Código Servicio"},
                                        { "field": "Nombre",    "title": "Descripción",  "width": "99px"  },
                                        { "title": "Eliminar",  "width": "99px"  }
                                    ]'>
                                </div>
                            </div>
                        </div>

                        <div class="row col-sm-2 no-margin no-padding float-right">
                            <div class="row col-sm-12 no-margin no-padding">
                                <div class="col-sm-12 no-padding">
                                    <label>Monto base</label>
                                    <div class="controls">
                                        <input id="txt_MontoBase" class="form-control focused" type="text" data-bind="">
                                    </div>
                                </div>
                            </div>

                            <div class="row col-sm-12">
                                <label class="checkbox inline">
                                    <input type="checkbox" value="option1" id="chk_MontoDigitado">
                                    Monto digitado
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row col-sm-12 no-margin well">
                    <div class="col-sm-12">
                        <div class="row col-sm-12 no-margin no-padding">
                            <h2>Medios de Pago</h2>
                            <hr>
                        </div>

                        <div class="row col-sm-12 no-margin no-padding">
                            <div class="col-sm-2 no-padding">
                                <label>Tipo</label>
                                <div class="controls">
                                    <input id="ddl_TipoPago" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-2 no-padding-right">
                                <label>Monto de visita</label>
                                <div class="controls">
                                    <input id="txt_MontoVisita" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <div class="space-8"></div>
                                <label class="checkbox inline">
                                    <input type="checkbox" value="option1" id="chk_ExonerarMontoVisita">
                                    Exonerar monto de visita
                                </label>
                            </div>

                            <div class="col-sm-2 no-padding-right float-right">
                                <label>Tipo de cambio</label>
                                <div class="controls">
                                    <input id="txt_TipoCambio" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>
                        </div>

                        <div class="row col-sm-12 no-margin no-padding">
                            <label>Área Promocional</label>

                            <div class="space-4"></div>

                            <div id="lbl_AreaPromocional" class="alert alert-info">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <strong>Mensaje:</strong><label id="lbl_Mensaje">Sugiere al cliente usar el medio de pago Tarjeta OH! para beneficio adicional</label>
                                <br>
                                <br>
                                <strong>Promociones:</strong>
                                <br>
                                <label id="lbl_Promociones">1001 - Porcentaje de descuento 15%</label>
                            </div>
                        </div>

                        <div class="row col-sm-12 no-margin no-padding">
                            <div class="col-sm-2 no-padding-left">
                                <label>Total descuento</label>
                                <div class="controls">
                                    <input id="txt_TotalDcto" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-2 no-padding-left">
                                <label>Sub total</label>
                                <div class="controls">
                                    <input id="txt_SubTotal" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-2 no-padding-left">
                                <label>Monto gravado</label>
                                <div class="controls">
                                    <input id="txt_MontoGravado" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-2 no-padding-left">
                                <label>IGV</label>
                                <div class="controls">
                                    <input id="txt_Igv" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>

                            <div class="col-sm-2 no-padding-left">
                                <label><strong>Total a pagar</strong></label>
                                <div class="controls">
                                    <input id="txt_TotalPago" class="form-control focused" type="text" data-bind="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @Html.Partial("_BuscarCliente")
    @Html.Partial("_BuscarServicio")
    @Html.Partial("_BuscarTecnico")
</div>

@*<script src="~/assets/js/jquery-2.0.3.min.js"></script>

<script src="~/assets/js/bootstrap.min.js"></script>
<script src="~/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="~/assets/js/jquery.sparkline.min.js"></script>
<script src="~/assets/js/jquery.chosen.min.js"></script>
<script src="~/assets/js/jquery.cleditor.min.js"></script>
<script src="~/assets/js/jquery.autosize.min.js"></script>
<script src="~/assets/js/jquery.placeholder.min.js"></script>
<script src="~/assets/js/jquery.maskedinput.min.js"></script>
<script src="~/assets/js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="~/assets/js/bootstrap-datepicker.min.js"></script>
<script src="~/assets/js/bootstrap-timepicker.min.js"></script>

<script src="~/Scripts/homesolutions/common-functions.js"></script>*@
<script>
    var SolicitudServicioVM = null;
    var SolicitudServicioTemp = @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));

    $(document).ready(function () {
        SetModalDialogs();
        SetActionForModalDialogs();
        SetFormControls();

        SolicitudServicioVM = new kendo.observable({
            SolicitudServicio: @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore })),
            //tipoDocumentoDS: grd_TipoDocumentoDS,
            //serviciosDS: AjaxObjectActionPost('/Servicio/GetEntities', null),
            //serviciosDS: grd_ServiciosDS,
            //subtiposDS: grd_SubtiposDS,
            //distritosDS: grd_DistritosDS,
            //provinciasDS: grd_ProvinciasDS,
            //departamentosDS: grd_DepartamentosDS
        });

        kendo.bind($('#SolicitudServicio'), SolicitudServicioVM);
    });

    function SetModalDialogs() {
        // start: Condiciones
        // Modales de 400px de largo

        // Modales de 600px de largo

        $('#dlg_BuscarCliente, #dlg_BuscarServicio, #dlg_BuscarTecnico').dialog({
            autoOpen: false, width: 600, modal: true
        });
        // end: Condiciones
    }

    function SetActionForModalDialogs() {
        $('#btn_BuscarCliente').click(function () {
            $('#dlg_BuscarCliente').dialog('open');
        });

        $('#btn_BuscarServicio').click(function () {
            $('#dlg_BuscarServicio').dialog('open');
        });

        $('#btn_BuscarTecnico').click(function () {
            $('#dlg_BuscarTecnico').dialog('open');
        });
    }

    function SetFormControls() {
        /* TimePickers */
        $('#dtm_HoraVisita').timepicker();
    }

    function GetFilterCriteriaSubtipo() {
        return {
            "idService": $("#ddl_Servicios").data("kendoDropDownList").value(),
            "estado": "true"
        }
    }
</script>
